<template>
  <div class="container">
    <form @submit.prevent="createBank()" class="mt-5 mb-5">
      <div class="mb-1">
        <label for="name" class="form-label">Назва банку</label>
        <input type="text" class="form-control" id="name" v-model="name" :class="{'is-valid': nameValid, 'is-invalid': !nameValid}">
        <div class="invalid-feedback">
          Ім'я має бути 4-255 символів
        </div>
      </div>
      <div class="mb-1" v-show="nameValid">
        <label for="rate" class="form-label">Відсоткова ставка</label>
        <input type="text" class="form-control" id="rate" v-model="rate" :class="{'is-valid': rateValid, 'is-invalid': !rateValid}">
        <div class="invalid-feedback">
          Відсоткова ставка має бути числом
        </div>
      </div>
      <div class="mb-1" v-show="rateValid">
        <label for="max_loan" class="form-label">Максимальний кредит</label>
        <input type="text" class="form-control" id="max_loan" v-model="max_loan" :class="{'is-valid': maxLoanValid, 'is-invalid': !maxLoanValid}">
        <div class="invalid-feedback">
          Кредит має бути числом
        </div>
      </div>
      <div class="mb-1" v-show="maxLoanValid">
        <label for="min_down_payment" class="form-label">Мінімальний внесок</label>
        <input type="text" class="form-control" id="min_down_payment" v-model="min_down_payment" :class="{'is-valid': minDownPaymentValid, 'is-invalid': !minDownPaymentValid}">
        <div class="invalid-feedback">
          Внесок має бути числом. Внесок не може бути більше за кредит.
        </div>
      </div>
      <div class="mb-2" v-show="minDownPaymentValid">
        <label for="max_term" class="form-label">Максимальний термін</label>
        <input type="text" class="form-control" id="max_term" v-model="max_term" :class="{'is-valid': maxTermValid, 'is-invalid': !maxTermValid}">
        <div class="invalid-feedback">
          Термін має бути числом
        </div>
      </div>
      <button type="submit" class="btn btn-primary" :class="{'disabled': !allValid}">Створити банк</button>
    </form>
    <div class="mt-3 mb-3 d-flex gap-3 flex-wrap">
      <div class="card" style="width: 18rem;" v-for="bank in banks" :key="bank.id">
        <div class="card-body">
          <h5 class="card-title">{{bank.name}}</h5>
            <ul class="list-group list-group-flush mb-3">
              <li class="list-group-item p-0">Відсоткова ставка: {{bank.rate}}%</li>
              <li class="list-group-item p-0">Максимальний кредит: {{bank.max_loan}}$</li>
              <li class="list-group-item p-0">Мінімальний внесок: {{bank.min_down_payment}}$</li>
              <li class="list-group-item p-0">Максимальний термін: {{bank.max_term}} місяців</li>
            </ul>
          <a href="#" class="card-link link-danger" @click.prevent="removeBank(bank.id)">Remove bank</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banks: {},
      name: null,
      rate: null,
      max_loan: null,
      min_down_payment: null,
      max_term: null,
    }
  },
  computed: {
    nameValid() {
      if(this.name) {
        return this.name.length > 3
      }
      return false
    },
    rateValid() {
      if(this.rate) {
        return !isNaN(this.rate) && this.rate > 0 //any string that does not contain a number will be converted to NaN
      }
      return false
    },
    maxLoanValid() {
      if(this.max_loan) {
        return !isNaN(this.max_loan) && this.max_loan > 100 //any string that does not contain a number will be converted to NaN
      }
      return false
    },
    minDownPaymentValid() {
      if(this.min_down_payment && this.max_loan) {
        return !isNaN(this.min_down_payment) //&& (this.min_down_payment < this.max_loan) //WTF? Why 13 is more than 120? Why 11 is more than 100?
      }
      return false
    },
    maxTermValid() {
      if(this.max_term) {
        return !isNaN(this.max_term) && this.max_term > 0 //any string that does not contain a number will be converted to NaN
      }
      return false
    },
    allValid() {
      return this.nameValid && this.rateValid && this.maxLoanValid && this.minDownPaymentValid && this.maxTermValid
    }
  },
  methods: {
    getBanks() {
      axios.get('/api/v1/banks/')
        .then(response => {
          this.banks = response.data.data
        })
        .catch(error => {
          console.error(error)
          this.errored = true
        })
        .finally(() => {
          this.loading = false
        })
    },
    createBank() {
      axios.post('/api/v1/banks/', {
        name: this.name, 
        rate: this.rate, 
        max_loan: this.max_loan, 
        min_down_payment: this.min_down_payment, 
        max_term: this.max_term
      })
        .then(response => {
          this.banks = {}
          this.name = null,
          this.rate = null,
          this.max_loan = null,
          this.min_down_payment = null,
          this.max_term = null,
          this.getBanks()
        })
        .catch(error => {
          console.error(error)
          this.errored = true
        })
        .finally(() => {
          this.loading = false
        })
    },
    removeBank(id) {
      axios.post('/api/v1/banks/'+id, {
        _method: 'DELETE'
      })
        .then(response => {
          this.banks = {}
          this.getBanks()
        })
        .catch(error => {
          console.error(error)
          this.errored = true
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  mounted () {
    this.getBanks()
  }
}
</script>
<style>

</style>